<template>
    <div class="loginWrap">

        <!--顶部logo start-->
        <div class="logo">
            <img src="../assets/img/logo.jpg">
            <p>IM聊天登录</p>
        </div>
        <!--顶部logo end-->

        <!--表单数据 start-->

        <div class="LoginData">
            <div class="inpCol userName">
                <div class="icon">
                    <img src="../assets/img/userName_icon.png">
                </div>
                <input type="text" placeholder="请输入手机号/登录账号" v-model="userName">
            </div>
            <div class="inpCol userPass">
                <div class="icon">
                    <img src="../assets/img/userPass_icon.png">
                </div>
                <input :type="!vis?'password':'text'" placeholder="请输入登录密码" v-model="userPass">
                <div class="visIcon" @click="changeVis">
                    <img src="../assets/img/visible.png" v-show="vis">
                    <img src="../assets/img/invisible.png" v-show="!vis">
                </div>
            </div>
        </div>

        <!--<div class="agreement" @click="changeAgr">
            <div class="option">
                <img src="../assets/img/hook.png" v-show="agr">
            </div>
            <div class="agrTxt">我已经同意《IM聊天软件的服务协议》</div>
        </div>-->

        <div class="loginBtn" @click="loginSubmit">登录</div>

        <!--表单数据 end-->

        <!--底部信息 start-->
        <div class="botInfo">
            <p class="left" @click="bindToForgotPassword">忘记密码</p>
            <p @click="bindToRegister">注册</p>
        </div>
        <!--底部信息 end-->

    </div>
</template>

<script>
    import {Loading, Toast} from 'vant'
    import Url from "../untils/configUrl";
    import {post} from "../untils/https"

    export default {
        data() {
            return {
                vis: false,
                agr: false,
                userName: null,
                userPass: null
            }
        },
        methods: {
            changeVis() {
                this.vis = !this.vis
            },
            changeAgr() {
                this.agr = !this.agr
            },
            bindToRegister() {
                this.$router.push("/register")
            },
            //登录
            loginSubmit() {
                if (!this.userName) {
                    Toast({
                        duration: 2000,
                        message: '请输入登录账号！',
                    });
                    return
                }
                if (!this.userPass) {
                    Toast({
                        duration: 2000,
                        message: '请输入登录密码！'
                    });
                    return
                }

                Toast.loading({
                    mask: true,
                    message: '加载中...',
                    duration: 0
                });
                post(Url.urlConfig.login, {
                    username: this.userName,
                    password: this.userPass
                }).then((data) => {
                    console.log();
                    Toast.clear();
                    if (data.code === 200) {
                        let oldTime = new Date().getTime();
                        let token = {
                            token: data.token,
                            oldTime
                        };
                        localStorage.setItem("toketn", JSON.stringify(token));
                        localStorage.setItem("userName", this.userName);
                        localStorage.setItem("active_id", data.data.active_id);
                        this.$store.dispatch("records",localStorage.getItem(data.data.active_id));
                        this.$store.dispatch("initActive_id",data.data.active_id);
                        this.$router.push("/message");
                    }
                }, () => {
                    Toast.clear();
                });
            },
            bindToForgotPassword() {
                this.$router.push("/forgotpassword")
            }
        },
        components: {
            [Loading.name]: Loading
        },
        created() {
            let userName = localStorage.getItem("userName");
            if (userName) {
                this.userName = userName
            }
        }
    }
</script>

<style scoped lang="less">

    .loginWrap {
        width: 100%;
        height: 100%;
        background: #fff url("../assets/img/loginWrap_bg.png") no-repeat center 0;
        background-size: 100% 100%;
        overflow: hidden;

        .logo {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 154px 0 245px 0;

            img {
                width: 90px;
                height: 90px;
                border-radius: 50%;
                margin-right: 26px;
            }

            p {
                font-size: 36px;
                font-family: PingFangSC-Medium;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
            }
        }

        .LoginData {
            .inpCol {
                position: relative;
                display: flex;
                align-items: center;
                width: 480px;
                height: 54px;
                border-bottom: 1px solid #fff;
                margin: 0 auto;
                padding-left: 6px;
                box-sizing: border-box;

                .icon {
                    width: 36px;
                    height: 36px;

                    img {
                        width: 36px;
                        height: 36px;
                    }

                    margin-right: 20px;

                }

                input {
                    width: 400px;
                    height: 54px;
                    line-height: 54px;
                    background-color: transparent;
                    font-size: 26px;
                    font-family: PingFangSC-Regular;
                    font-weight: 400;
                    color: rgba(255, 255, 255, 1);

                    &::-webkit-input-placeholder {
                        font-size: 26px;
                        font-family: PingFangSC-Regular;
                        font-weight: 400;
                        color: rgba(203, 212, 249, 1);
                    }

                    &:-ms-input-placeholder {
                        font-size: 26px;
                        font-family: PingFangSC-Regular;
                        font-weight: 400;
                        color: rgba(203, 212, 249, 1);
                    }
                }
            }

            .userName {
                margin-bottom: 49px;
            }

            .userPass {
                .icon {
                    img {
                        margin-left: 5px;
                    }
                }

                .visIcon {
                    position: absolute;
                    right: 0;
                    top: 50%;
                    margin-top: -18px;
                    width: 36px;
                    height: 36px;

                    img {
                        width: 36px;
                        height: 36px;
                    }
                }

            }
        }

        .agreement {
            width: 480px;
            margin: 47px auto 0;
            display: flex;
            align-items: center;

            .option {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                border: 2px solid #fff;
                margin: 0 20px 0 6px;
                box-sizing: border-box;

                img {
                    width: 100%;
                    height: 100%;
                    vertical-align: top;
                }
            }

            .agrTxt {
                font-size: 21px;
                font-family: Adobe Heiti Std R;
                font-weight: normal;
                color: rgba(255, 255, 255, 1);
                line-height: 52px;
            }
        }

        .loginBtn {
            width: 395px;
            height: 69px;
            text-align: center;
            line-height: 69px;
            margin: 70px auto 0;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0 12px 12px 0 rgba(98, 125, 241, 0.25);
            border-radius: 34px;
            font-size: 28px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(98, 125, 241, 1);
        }

        .botInfo {
            position: absolute;
            display: flex;
            width: 395px;
            left: 50%;
            bottom: 100px;
            margin-left: -195px;

            p {
                width: 50%;
                text-align: center;
                font-size: 28px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
            }

            .left {
                width: 60%;
                border-right: 1px solid #fff;
            }
        }

    }

</style>
